<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view>
		<uv-swiper 
			:list="list" 
			@change="e => current2 = e.current" 
			height="90vw"
			indicatorStyle="right: 20px">
			<template v-slot:indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ current2 + 1 }}/{{ list.length }}</text>
				</view>
			</template>
		</uv-swiper>
		<!-- 信息栏目 -->
		<view class="info-column">
			<view class="info-price-wrapper">
				<view class="price-box"><text style="font-size: 40rpx;">￥</text>{{product.otPrice}}</view>
				<view class="volume">
					<uni-icons type="fire-filled" size="13" color="#FF162E" style="margin-right: 5rpx;"></uni-icons>
					{{product.sales}}人已兑换
				</view>
			</view>
			<view class="info-price-wrapper">
				<view class="label">
					<label class="label1">
						<uni-icons type="hand-up-filled" size="13" color="#fff" style="margin-right: 5rpx;"></uni-icons>
						超值兑
					</label>
					<label class="label2">商品</label>
				</view>
			</view>
			<view class="line20"></view>
			<view class="info-title">
				{{product.title}}
			</view>
			<view class="commodity-box">	
				<view class="service-box">
					<view><uv-icon name="checkmark-circle" color="#333" size="12" label="限时兑换"></uv-icon></view>
					<view class="ml-2"><uv-icon name="checkmark-circle" color="#333" size="12" label="全国包邮"></uv-icon></view>
					<view class="ml-2"><uv-icon name="checkmark-circle" color="#333" size="12" label="7天无理由退换"></uv-icon></view>
				</view>
			</view>
		</view>
		<view class="service-wrap" @click="change">
			<view class="emption">
				<view class="emption-fh">发货</view>
				<view class="emption-zp">品牌仓库 丨 平台承担</view>
			</view>
			<view class="emption">
				<view class="emption-fh">库存</view>
				<view class="emption-zp">仅剩：<text class="text">{{product.stock}}件</text><text class="text2">每人限兑一件</text></view>
			</view>
		</view>
		<view class="graphic">
			<view class="graphic-header">
				图文详情
			</view>
			<view class="detail-desc">
				<rich-text :nodes="product.desc"></rich-text>
			</view>
		</view>
		<view class="price-info">
			<view class="title">价格说明</view>
			<view>
				1、关于价格说明：划线价格：指商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价，并非原价，仅供参考。
			</view>
			<view>
				2、未划线价格：指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或使用优惠券、积分、补贴、红包等发生变化，最终以订单结算页价格为准。
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<uni-goods-nav :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick"  class="goods-nav"/>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
	</view>
</template>

<script setup>
import {
  ref,
  computed,
  getCurrentInstance
} from 'vue'
import { onReachBottom,onLoad,onPullDownRefresh,onPageScroll} from '@dcloudio/uni-app'
import {
  scoreShopExchange,
  scoreShopDetail
} from '@/api/score'
import cookie from '@/utils/cookie'
const { proxy } = getCurrentInstance();
const product = ref({})
const id = ref(0)
const buttonText = ref("商品详情")
const options = ref([
	{
		icon: 'home',
		text: '首页'
	}
])
const buttonGroup = ref([
	{
	  text: '￥000',
	  backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
	  color: '#fff',
	  price:'直接购买'
	},
	{
	  text: '超值兑>',
	  backgroundColor: '#ff0000',
	  color: '#fff',
	  price:'00积分+00元'
	}
])
const isBackTop = ref(false)
const list = ref([
])
const current2 = ref(0)
const scrollTop = ref(0)

onPullDownRefresh(() => {
	getDetail(id.value);
})

onLoad((options) => {
   id.value = options.id;
   getDetail(options.id);
})


onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
})

const onClick = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

const buttonClick = (e) => {
	//0-原价 1-积分兑换
	confirm(e.index)
}

const confirm = (index) => {
	cookie.set('score_product',product.value)
	cookie.set('is_origin',index)
	uni.navigateTo({
		url: '/pages/components/pages/scoreproduct/confirm'
	})
}

// 获取商品详情
const  getDetail = async(id, flash_id) => {
	let data = await scoreShopDetail({
		id: id
	});
	uni.stopPullDownRefresh();
	list.value = data.images
	product.value = data
	buttonGroup.value[0].text = '￥' + data.otPrice
	buttonGroup.value[1].price = data.score + '积分'+ data.price +'元'
	setGoodsDetail(product.value)
}

/**
 * 处理商品详情逻辑
 * @param detail
 */
const setGoodsDetail = (detail) => {
  product.value.desc = detail.desc.replace(
      /<img /g,
      "<img style='width:100%;' "
  );
}


	
</script>

<style lang="scss">
	page{
		padding-bottom: 55px;
		font-size: $font-size-sm;
	}
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.indicator {
		@include flex(row);
		justify-content: center;
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;
			&--active {
				background-color: #ffffff;
			}
		}
	}
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;
		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	.goods-nav{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}
	.info-column{
		padding: 20rpx 20rpx 0;
		background-color: $uni-text-color-inverse;
		.info-price-wrapper{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price-box{
				color: $theme-color;
				font-weight: bold;
				font-size: 48rpx;
			}
			.volume{
				font-size: $font-size-sm;
				color: $text-color-grey;
			}
			.label{
				margin: 20rpx 0;
				label{
					padding: 2rpx 10rpx;
					font-size: $font-size-sm;
					display: inline-block;
					border-radius: 5rpx;					
				}
				.label1{
					color: $uni-text-color-inverse;
					background-color: $theme-color;
					margin-right: 15rpx;
				}
				.label2{
					color: $text-color-grey;
					border: 1rpx solid $text-color-grey;
				}
			}
			.info-price-right{
				display: flex;
				align-items: center;
			}
		}
		.line20{
			width: 100vw;
			background-color: $bg-color;
			height: 10px;
			margin-left: -20rpx;
		}
		.info-title{
			margin-top: 20rpx;
			font-weight: bold;
			font-size: $font-size-lg;
		}
		.commodity-box{
			padding: 15rpx 0;
			display: flex;
			margin-top: 20rpx;
			align-items: center;
			.service-box{
				display: flex;
				position: relative;
				margin-left: 40rpx;
				&::before{
					content: "";
					width: 1px;
					height: 15px;
					background-color:$text-color-disable;
					position: absolute;
					left: -15rpx;
				}
			}
		}
	}
	
	.service-wrap{
		width: 100%;
		background-color: $uni-text-color-inverse;
		margin-bottom: 20rpx;
		font-size: $font-size-sm;
		.emption{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: space-between;
			.emption-arrow{
				position: absolute;
				right: 20rpx;
			}
			.emption-fh{
				width: 110rpx;
				text-align: center;
				color: $text-color-grey;
			}
			.emption-zp{
				flex: 1;
				height: 100%;
				line-height: 50px;
				border-bottom: 1rpx solid #e5e5e5;
				.text{
					color: $theme-color;
				}
				.text2{
					color: #fff;
					background-color: $theme-color;
					padding: 0 15rpx;
					border-radius: 5rpx;
					margin: 0 20rpx;
				}
			}
		}
	}
	
	.graphic{
		background-color: #fff;
		.graphic-header{
			height: 80rpx;
			line-height: 80rpx;
			font-weight: bold;
			font-size: 35rpx;
			padding: 20rpx;
			position: relative;
			display: flex;
			align-items: center;
			padding-left: 50rpx;
			&:before{
				content: "";
				width: 7rpx;
				height: 50%;
				position: absolute;
				left: 20rpx;
				background-color: $theme-color;
				border-radius: 5rpx;
			}
		}
	}
	
	.price-info{
		background: #f7f7f7;
		font-size: 24rpx;
		color:#a1a1a1;
		padding: 30rpx;
		line-height: 1.7;
		.title{
			font-size: 26rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}
	
</style>
